<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <!-- 
        Vue模板语法有2大类：
            1.插值语法：
                功能：用于解析标签体内容。
                写法：{{xxx}，xxx是js表达式，且可以直接读取到data中的所有属性。
            2.指令语法：
                功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.···.）
                举例：v-bind：href="xxx”或简写为：href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
                备注：Vue中有很多的指令，且形式都是：V-？？？？，此处我们只是拿v-bind举个例子。
    -->

    <div id="root">
        <h1>我的名字叫：{{name}}</h1>
        <hr/>
        <h1>我的学校是：{{school.name}}</h1>
        <a :href="school.url">我的博客地址</a>
    </div>

    <script type="text/javascript">
        // 创建一个 Vue 实例
        const x = new Vue({
            el : "#root",
            data : {
                name : "lee",
                school : {
                    name : "郑航",
                    url : "https://blog.csdn.net/lee180501/category_12440608.html?spm=1001.2014.3001.5482"
                }
            }
        })
    </script>
    
</body>
</html>